<template>
  <div class="workload-statistics">
    <h2>工作量统计</h2>
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6" v-for="card in statisticsCards" :key="card.title">
        <el-card shadow="hover" class="statistics-card">
          <template #header>
            <div class="card-header">
              <span>{{ card.title }}</span>
              <el-tag :type="card.tagType" size="small">{{ card.period }}</el-tag>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ card.value }}</h2>
            <div class="trend">
              <span :class="card.trend >= 0 ? 'up' : 'down'">
                {{ Math.abs(card.trend) }}%
                <el-icon><ArrowUp v-if="card.trend >= 0"/><ArrowDown v-else/></el-icon>
              </span>
              <span class="compare">较上期</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>接诊趋势</span>
              <el-radio-group v-model="trendTimeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">本年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <div ref="trendChart" style="height: 300px"></div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>疾病分布</span>
              <el-select v-model="diseaseTimeRange" size="small" style="width: 100px">
                <el-option label="最近一周" value="week"/>
                <el-option label="最近一月" value="month"/>
                <el-option label="最近一年" value="year"/>
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <div ref="diseaseChart" style="height: 300px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据表格 -->
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span>工作量明细</span>
          <div class="header-operations">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
            />
            <el-button type="primary" size="small" @click="exportData">导出数据</el-button>
          </div>
        </div>
      </template>

      <el-table
        :data="workloadDetails"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="date" label="日期" width="120"/>
        <el-table-column prop="outpatientCount" label="门诊量" width="100"/>
        <el-table-column prop="prescriptionCount" label="处方数" width="100"/>
        <el-table-column prop="examinationCount" label="检查数" width="100"/>
        <el-table-column prop="laboratoryCount" label="检验数" width="100"/>
        <el-table-column prop="diseaseTypes" label="疾病种类" min-width="200"/>
        <el-table-column prop="avgDuration" label="平均接诊时长" width="120"/>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

interface WorkloadDetail {
  date: string
  outpatientCount: number
  prescriptionCount: number
  examinationCount: number
  laboratoryCount: number
  diseaseTypes: string
  avgDuration: string
}

// 统计卡片数据
const statisticsCards = ref([
  {
    title: '今日接诊',
    value: 45,
    trend: 12.5,
    period: '今日',
    tagType: 'success'
  },
  {
    title: '处方数量',
    value: 38,
    trend: 8.3,
    period: '今日',
    tagType: 'warning'
  },
  {
    title: '检查申请',
    value: 15,
    trend: -5.2,
    period: '今日',
    tagType: 'info'
  },
  {
    title: '检验申请',
    value: 23,
    trend: 15.7,
    period: '今日',
    tagType: 'danger'
  }
])

// 图表相关
const trendTimeRange = ref('week')
const diseaseTimeRange = ref('week')
const trendChart = ref<HTMLElement | null>(null)
const diseaseChart = ref<HTMLElement | null>(null)

// 表格相关
const loading = ref(false)
const dateRange = ref<[Date, Date] | null>(null)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const workloadDetails = ref<WorkloadDetail[]>([])

// 初始化趋势图表
const initTrendChart = () => {
  const chart = echarts.init(trendChart.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['接诊量', '处方量', '检查量', '检验量']
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '接诊量',
        type: 'line',
        data: [30, 35, 40, 45, 38, 25, 28]
      },
      {
        name: '处方量',
        type: 'line',
        data: [25, 30, 35, 40, 32, 20, 23]
      },
      {
        name: '检查量',
        type: 'line',
        data: [10, 12, 15, 18, 14, 8, 10]
      },
      {
        name: '检验量',
        type: 'line',
        data: [15, 18, 20, 22, 19, 12, 14]
      }
    ]
  }
  chart.setOption(option)
}

// 初始化疾病分布图表
const initDiseaseChart = () => {
  const chart = echarts.init(diseaseChart.value)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '疾病分布',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 35, name: '呼吸系统疾病' },
          { value: 25, name: '消化系统疾病' },
          { value: 20, name: '心血管疾病' },
          { value: 15, name: '内分泌疾病' },
          { value: 5, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

// 获取工作量明细数据
const fetchWorkloadDetails = () => {
  loading.value = true
  // TODO: 调用后端API获取数据
  setTimeout(() => {
    workloadDetails.value = [
      {
        date: '2024-04-29',
        outpatientCount: 45,
        prescriptionCount: 38,
        examinationCount: 15,
        laboratoryCount: 23,
        diseaseTypes: '呼吸系统疾病, 消化系统疾病, 心血管疾病',
        avgDuration: '15分钟'
      },
      // ... 更多数据
    ]
    loading.value = false
  }, 1000)
}

// 导出数据
const exportData = () => {
  // TODO: 实现数据导出功能
  console.log('导出数据')
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  fetchWorkloadDetails()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchWorkloadDetails()
}

// 监听时间范围变化
watch([trendTimeRange, diseaseTimeRange], () => {
  // TODO: 根据时间范围重新获取数据并更新图表
})

// 页面加载时初始化
onMounted(() => {
  initTrendChart()
  initDiseaseChart()
  fetchWorkloadDetails()
})
</script>

<style scoped>
.workload-statistics {
  padding: 20px;
}

.statistics-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.statistics-card {
  background: #fff;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #ebeef5;
}

.card-header .title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.card-header .select {
  width: 120px;
}

.card-content {
  text-align: center;
}

.card-content h2 {
  margin: 10px 0;
  font-size: 24px;
}

.trend {
  font-size: 14px;
}

.trend .up {
  color: #67c23a;
}

.trend .down {
  color: #f56c6c;
}

.trend .compare {
  color: #909399;
  margin-left: 5px;
}

.charts-row {
  margin: 20px 0;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-card .card-header {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.chart-container {
  height: 400px;
  padding: 1rem;
}

.table-card {
  margin-top: 20px;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.trend-icon {
  margin-right: 4px;
  font-size: 12px;
}

.trend-value {
  font-size: 14px;
  margin-left: 8px;
}

.trend-value.up {
  color: #67c23a;
}

.trend-value.down {
  color: #f56c6c;
}

.radio-group {
  margin-left: 1rem;
}

.table-operations {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 
 